<a class="usa-skipnav" href="#main-content">Skip to main content</a>
<header class="usa-header site-header" role="banner">
  <div class="usa-disclaimer">
    <div class="usa-disclaimer-official">
      <img src="{{ site.baseurl }}/assets/img/favicons/favicon-40.png" alt="U.S. flag">
      <p>An official website of the United States government</p>
    </div>
    <p class="usa-disclaimer-stage">
      This site is currently in alpha.
      <a href="https://18f.gsa.gov/dashboard/stages/#alpha">Learn more.</a>
    </p>
  </div>
  <div class="usa-navbar site-header-navbar">
    <button class="usa-menu-btn">Menu</button>
    <div class="usa-logo site-logo" id="logo">
      <em class="usa-logo-text">
        <a href="{{ site.baseurl }}/" accesskey="1" title="Home" aria-label="Home">
        Draft U.S. Web Design Standards</a>
      </em>
    </div>
    {% include download-buttons.html %}
  </div>
  <nav class="site-nav-secondary js-sticky-nav">
    <ul>
      <li>
        <a {% if page.category == 'UI components' or page.title == 'UI components' %}class="usa-current"{% endif %} href="/">UI COMPONENTS</a>
      </li>
      <li>
        <a {% if page.category == 'Getting started' or page.title == 'Getting started' %}class="usa-current"{% endif %} href="/getting-started/">GETTING STARTED</a>
      </li>
      <li>
        <a {% if page.title == 'Design principles' %}class="usa-current"{% endif %} href="/design-principles/">DESIGN PRINCIPLES</a>
      </li>
      <li>
        <a {% if page.category == 'About our work' or page.title == 'About our work' %}class="usa-current"{% endif %} href="/about-our-work/">ABOUT OUR WORK</a>
      </li>
    </ul>
  </nav>
</header>
<div class="usa-overlay"></div>
